<template>
  <div class="direct-order-container">
    <h4 class="section-title">基本信息</h4>
    <br>
    <section>
      <el-form ref="form" :model="form" label-width="80px" :rules="rules">
        <el-form-item label="订货门店">
          <el-select v-model="form.storeId" placeholder="请选择订货门店" v-if="type=='add'">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
          <span v-else>{{ form.storeName }}</span>
        </el-form-item>
        <el-form-item label="所属公司">{{ form.company }}</el-form-item>
        <el-form-item label="发货主体">
          <el-select v-model="form.region" placeholder="请选择发货主体" v-if="type=='add'">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
          <span v-else>{{ form.region }}</span>
        </el-form-item>
        <el-form-item label="供货仓库">
          <el-select v-model="form.region" placeholder="请选择供货仓库" v-if="type=='add'">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
          <span v-else>{{ form.region }}</span>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="form.remarks" :rows="3" v-if="type=='add'"></el-input>
          <span v-else>{{ form.remarks }}</span>
        </el-form-item>
      </el-form>
    </section>
    <br>
    <h4 class="section-title">商品信息</h4>
    <br>
    <el-upload
      v-if="type!='detail'"
      action=""
      :file-list="fileList">
      <el-button type="primary">点击上传</el-button>
    </el-upload>
    <el-button type="primary" v-else>导出</el-button>
    <br>
    <el-table :data="list" style="width: 100%">
      <el-table-column type="index" label="序号"></el-table-column>
      <el-table-column prop="date" label="商品编码"></el-table-column>
      <el-table-column prop="date" label="商品名称"></el-table-column>
      <el-table-column prop="date" label="单位"></el-table-column>
      <el-table-column prop="date" label="规格"></el-table-column>
      <el-table-column prop="date" label="订货数量"></el-table-column>
      <el-table-column prop="date" label="库存量"></el-table-column>
      <el-table-column prop="date" label="标准零售价(元)"></el-table-column>
      <el-table-column prop="date" label="订货金额(元)"></el-table-column>
    </el-table>
    <nb-table
      :tableHeaders="tableHeaders"
      :tableData="tableData"
      :fixedOne="fixedOne"
      :format="format"
      height="auto">
    </nb-table>
    <p class="count-info">订货数量合计： &nbsp;&nbsp;元 &nbsp;订货金额合计：&nbsp;&nbsp;元</p>
    <section class="operation-btn">
      <el-button type="primary" @click="onSave">保存</el-button>
      <el-button type="primary" @click="onConfirm">提交</el-button>
      <el-button>返回</el-button>
    </section>
  </div>
</template>
<script>
  import NbTable from '@/components/nb-table.vue'
  export default {
    components: {
      NbTable
    },
    data () {
      return {
        form: {},
        id: '',
        type: '', // 类型new新增, edit编辑, detail详情页
        rules: {
          storeCode: [{ required: true, message: '门店编码不允许为空', trigger: 'blur' }],
          storeName: [{ required: true, message: '门店名称不允许为空', trigger: 'blur' }],
          channel: [{ required: true, message: '渠道不允许为空', trigger: 'blur' }],
          address: [{ required: true, message: '门店地址不允许为空', trigger: 'blur' }],
          company: [{ required: true, message: '所属公司不允许为空', trigger: 'blur' }],
          area: [{ required: true, message: '所属区域不允许为空', trigger: 'blur' }],
          mainBody: [{ required: true, message: '发送主体不允许为空', trigger: 'blur' }],
          defaultWarehouse: [{ required: true, message: '默认发送仓库不允许为空', trigger: 'blur' }],
          contacts: [{ required: true, message: '联系人不允许为空', trigger: 'blur' }],
          phone: [{ required: true, message: '联系电话不允许为空', trigger: 'blur' }]
        },
        list: [
          { date: '23423423' },
          { date: '23423423' },
          { date: '23423423' },
          { date: '23423423' },
          { date: '23423423' },
          { date: '23423423' },
          { date: '23423423' }
        ],
        fileList: [],
        tableHeaders: [
          {
            headerKey: 'goodsNo',
            headerName: '商品编码'
          },
          {
            headerKey: 'goodsName',
            headerName: '商品名称'
          },
          {
            headerKey: 'companyName',
            headerName: '单位'
          },
          {
            headerKey: 'specification',
            headerName: '规格'
          },
          {
            headerKey: 'goodsCount',
            headerName: '订货数量'
          },
          {
            headerKey: 'specification',
            headerName: '库存量'
          },
          {
            headerKey: 'retailPrice',
            headerName: '标准零售价(元)'
          },
          {
            headerKey: 'orderAmount',
            headerName: '订货金额(元)'
          }
        ],
        tableData: [],
        row: [],
        format: [],
        clickData: [],
        fixedOne: false,
        clickOne: false,
        clickLast: true
      }
    },
    methods: {
      // 接口保存新建信息
      onSave () {
        console.log('此处调接口')
      },
      onConfirm () {

      },
      onCancelInfo () {
        this.$router.push({name: 'directStore'})
      },
      getInfo () {

      },
      getConfig () {
        this.getInfo()
      },
      delQueryModel () {},
      clickRight (data) {
        switch (data.type) {
          case 'edit':
            // this.editItem(data.row.code)
            break
          case 'delete':
            // this.deleteItem(data.row.code)
            break
        }
      }
    },
    mounted () {
      this.type = this.$route.query.type
      if (this.type !== 'add') {
        this.id = this.$route.params.id
        this.getConfig()
      }
    }
  }
</script>
<style lang="scss" scoped>
  .direct-order-container {
    padding: 20px 30px 50px;
    margin-bottom: 100px;
    background-color: #fff;
  }
  .section-title {
    border-left: 5px solid #5597FB;
    padding: 10px;
  }
  .count-info {
    margin: 15px 0;
    text-align: right;
  }
  .operation-btn {
    margin: 15px auto;
    text-align: center;
  }
</style>


